<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>添加司机</title>
        <link rel="stylesheet" href="__PUBLIC__/Leader/css/bootstrap.css">
        <link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="__PUBLIC__/Leader/css/index.css" />
        <style type="text/css">
            .order-list a {
                position: relative;
            }
            .order-list span {
                float: right;
                margin-right: 20px;
            }
            .pagination ul {
                display: inline-block;
                margin-left: 0;
                margin-bottom: 0;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
                -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
                -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            }
            .pagination ul > li {
                display: inline;
            }
            .pagination ul > li > a, .pagination ul > li > span {
                float: left;
                padding: 0 14px;
                line-height: 38px;
                text-decoration: none;
                background-color: #ffffff;
                border: 1px solid #dddddd;
                border-left-width: 0;
            }
            .myprovince{
                height:30px;
                line-height:30px;
                border-radius:5px;
            }
        </style>
    </head>
    <body>
        <include file="Index/head"/>
        <div class="wrapper main-wrapper wrapper-content ">
            <div class="page-menubar">
                <div class="menu-header">司机信息</div>
                <ul class="order-list">
                    <li>
                        <a href="{:U('User/userinfo')}">用户列表</a>
                    </li>
                    <li class="active">
                        <a href="{:U('User/sijiinfo')}">司机信息</a>
                    </li>
                </ul>
            </div>
            <!--主要内容-->
            <div class="page-content" style="display: block;">
                <!--内容标题-->
                <div class="page-heading" style="position:relative;">
                    <h2>添加司机</h2>
                </div>
                <div class="panel panel-default" style="margin-top: 20px;">
                    <div class="panel-body">
                        <div id="myTabContent" class="tab-content">
                            <div class="tab-pane active in" id="home">
                                <form role="form" id="tab">
                                    <div class="form-group">
                                      <label for="name">姓名：</label>
                                      <input type="text" class="form-control" name="xingming" style="width:40%;">
                                    </div>
                                    <div class="form-group">
                                        <label for="name">电话：</label>
                                        <input type="text" class="form-control" name="dianhua" style="width:40%;">
                                    </div>
                                    <div class="form-group">
                                        <label for="name">城市：</label>
                                        <div data-toggle="distpicker">
                                            <select class="myprovince" name="chengshi"></select>
                                            <select class="myprovince" name="city"></select>
                                            <!--<select class="myprovince" ></select>-->
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="name">省份证号码：</label>
                                        <input type="text" class="form-control" name="card_sf" style="width:40%;">
                                    </div>
                                    <div class="form-group">
                                        <label for="name">第一次领取驾照的时间：</label>
                                        <input type="date" class="form-control" name="create_jztime" style="width:40%;">
                                    </div>
                                    <div class="form-group">
                                        <label for="name">身份证正面：</label>
                                        <input type="file" class="form-control" name="card_img1" onchange="uploadsrc('card_img1','card_img2','card_img')" style="width:40%;">
                                        <img src="" id="card_img2" width="100px" height="50px"/>
                                        <input type="hidden" name="card_img" value=""/>
                                    </div>
                                    <div class="form-group">
                                        <label for="name">身份证反面：</label>
                                        <input type="file" class="form-control" name="card_gh1" onchange="uploadsrc('card_gh1','card_gh2','card_gh')" style="width:40%;">
                                        <img src="" id="card_gh2" width="100px" height="50px"/>
                                        <input type="hidden" name="card_gh" value=""/>
                                    </div>
                                    <div class="form-group">
                                        <label for="name">驾驶证正面：</label>
                                        <input type="file" class="form-control" name="jiashi_img1" onchange="uploadsrc('jiashi_img1','jiashi_img2','jiashi_img')" style="width:40%;">
                                        <img src="" id="jiashi_img2" width="100px" height="50px"/>
                                        <input type="hidden" name="jiashi_img" value=""/>
                                    </div>
                                    <div class="form-group">
                                        <label for="name">驾驶证反面：</label>
                                        <input type="file" class="form-control" name="jiashi_fm1" onchange="uploadsrc('jiashi_fm1','jiashi_fm2','jiashi_fm')" style="width:40%;">
                                        <img src="" id="jiashi_fm2" width="100px" height="50px"/>
                                        <input type="hidden" name="jiashi_fm" value=""/>
                                    </div>
                                    <div class="form-group">
                                        <label for="name">行驶证正面：</label>
                                        <input type="file" class="form-control" name="xingshi_zm1" onchange="uploadsrc('xingshi_zm1','xingshi_zm2','xingshi_zm')" style="width:40%;">
                                        <img src="" id="xingshi_zm2" width="100px" height="50px"/>
                                        <input type="hidden" name="xingshi_zm" value=""/>
                                    </div>
                                    <div class="form-group">
                                        <label for="name">行驶证反面：</label>
                                        <input type="file" class="form-control" name="xingshi_fm1" onchange="uploadsrc('xingshi_fm1','xingshi_fm2','xingshi_fm')" style="width:40%;">
                                        <img src="" id="xingshi_fm2" width="100px" height="50px"/>
                                        <input type="hidden" name="xingshi_fm" value=""/>
                                    </div>
                                    <div class="form-group">
                                        <label for="name">行驶证副本：</label>
                                        <input type="file" class="form-control" name="xingshi_fb1" onchange="uploadsrc('xingshi_fb1','xingshi_fb2','xingshi_fb')" style="width:40%;">
                                        <img src="" id="xingshi_fb2" width="100px" height="50px"/>
                                        <input type="hidden" name="xingshi_fb" value=""/>
                                    </div>
                                    <div class="form-group">
                                        <label for="name">人车合影：</label>
                                        <input type="file" class="form-control" name="mancar_img1" onchange="uploadsrc('mancar_img1','mancar_img2','mancar_img')" style="width:40%;">
                                        <img src="" id="mancar_img2" width="100px" height="50px"/>
                                        <input type="hidden" name="mancar_img" value=""/>
                                    </div>
                                    <div class="form-group">
                                      <button  type="button" class="btn btn-primary" onclick="tj()">添加</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script src="__PUBLIC__/Leader/js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="__PUBLIC__/Leader/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="__PUBLIC__/provinceCity/js/distpicker.data.js"></script>
    <script src="__PUBLIC__/provinceCity/js/distpicker.js"></script>
    <script src="__PUBLIC__/provinceCity/js/main.js"></script>
    <script src="__PUBLIC__/layer/layer.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        function tj() {
            $.ajax({
                type: "POST",
                url: "{:U('addsiji')}",
                cache: false,
                data: $('#tab').serialize(),
                success: function (data) {
                    var result = JSON.parse(data);
                    console.log(result);
                    if(result.code == 1){
                        layer.msg(result.msg);
                        setInterval(function(){
                            location.reload();
                        },2000)
                    }else{
                        layer.msg(result.msg);
                    }
                }
            })
        }


        $("[rel=tooltip]").tooltip();
        $(function () {
            $('.demo-cancel-click').click(function () {
                return false;
            });
        });


        //图片上传
        /**
         * @param picname1  file文件的名字
         * @param picname2  img class的名字
         * @param picname   input hidden name的名字
         */

        function uploadsrc(picname1,picname2,picname) {
            var form = new FormData();
            var mypicname = "input[name="+picname1+"]";
            console.log(mypicname);
            form.append("file", $(mypicname)[0].files[0]);
            $.ajax({
                type: "POST",
                url: "{:U('User/uploadpic')}",
                data: form,
                dataType: "json",
                processData: false,
                contentType: false,
                success: function (msg) {
                    if (msg.code) {
                        $("#"+picname2).attr('src',msg.result[0]);
                        var name = "input[ name='"+picname+"' ]";
                        $(name).val(msg.result[0]);
                    } else {
                        layer.msg(msg.msg);
                    }
                }
            });
        }
    </script>

</html>